<template>
  <div class="all">
    <!-- 页头 -->
    <el-container class="allContainer">
      <el-header class="head">
        <div class="divHead"></div>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <div>
                <div class="topFont">楼宇信息管理</div>
              </div>
            </div>
          </el-col>
          <div class="divBtn">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="addDialog = true">新增</el-button>
            <!---------------------------------- 批量删 ---------------------------------->
            <el-button slot="reference" size="mini" type="danger" icon="el-icon-delete" @click="batchDelect">批量删除
            </el-button>
          </div>
        </el-row>
      </el-header>
      <el-main class="bottomMain">
        <div class="divMain">
          <template>
            <!-- 模糊查询 -->
            <div class="mainTop">
              <div class="divInputAll">
                <!-- 输入框 -->
                <div class="divInput">
                  <div class="inputFont">楼宇名称：</div>
                  <div style="float:left;">
                    <el-input size="mini" placeholder="请输入楼宇名字" v-model="queryBuilding.buildingName">
                    </el-input>
                  </div>
                </div>
                <div class="likeBtn">
                  <el-button size="mini" type="success" icon="el-icon-search" @click="loadBuilding">查询</el-button>
                  <el-button size="mini" plain>重置</el-button>
                </div>
              </div>
            </div>
          </template>
          <!-- 查所有 -->
          <div class="divSelAll">
            <template>
              <el-table :data="buildingList" border style="width: 100%;font-size: xx-small;margin: auto;"
                :row-style="{ height: '22px' }" :cell-style="{ padding: '1px' }">
                <el-table-column fixed type="selection" prop="buildingId" width="45">
                </el-table-column>
                <el-table-column fixed prop="buildingName" label="楼宇名称" width="120">
                </el-table-column>
                <el-table-column prop="buildingNum" label="楼宇编号" width="100">
                </el-table-column>
                <el-table-column prop="buildingLayers" label="层数" width="90">
                </el-table-column>
                <el-table-column prop="buildingProperty" label="物业费（元/平/月）" width="140">
                </el-table-column>
                <el-table-column prop="buildingArea" label="建筑面积(m²)" width="120">
                </el-table-column>
                <el-table-column prop="buildingNowarea" label="在管面积" width="120">
                </el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作" width="425">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleEdit(scope.row.buildingId)">详情
                    </el-button>
                    <el-button type="text" size="small" @click="selectAllRoom(scope.row.buildingId)">房间信息
                    </el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.buildingId)">
                      <el-button type="text" size="small" slot="reference">删除</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
          <!-- 分页 -->
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryBuilding.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="queryBuilding.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="page.total">
          </el-pagination>
          <!-- 添加 -->
          <el-dialog title="楼宇信息新增" :visible.sync="addDialog" width="70%">
            <el-form :model="addForm" ref="addForm">
              <div>
                <el-form-item label="楼宇名称：" :label-width="formLabelWidth" prop="buildingName">
                  <el-input v-model="addForm.buildingName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="物业费：" :label-width="formLabelWidth" prop="buildingProperty">
                  <el-input v-model="addForm.buildingProperty" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="楼宇编号：" :label-width="formLabelWidth" prop="buildingNum">
                  <el-input v-model="addForm.buildingNum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="建筑面积；" :label-width="formLabelWidth" prop="buildingArea">
                  <el-input v-model="addForm.buildingArea" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="在管面积：" :label-width="formLabelWidth" prop="buildingNowarea">
                  <el-input v-model="addForm.buildingNowarea" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="楼宇描述：" :label-width="formLabelWidth" prop="buildingDescribe">
                  <el-input v-model="addForm.buildingDescribe" type="textarea" autosize autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="楼宇照片：" :label-width="formLabelWidth" prop="buildingImg">
                  <el-input v-model="addForm.buildingImg" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="楼宇地址：" :label-width="formLabelWidth" prop="buildingAddress">
                  <el-input v-model="addForm.buildingAddress" autocomplete="off"></el-input>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="楼层层高：" :label-width="formLabelWidth" prop="buildingFloorHeight">
                  <el-input v-model="addForm.buildingFloorHeight" autocomplete="off"></el-input>米
                </el-form-item>
                <el-form-item label="地上楼层：" :label-width="formLabelWidth" prop="buildingOver">
                  <el-input v-model="addForm.buildingOver" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地上楼层面积：" :label-width="formLabelWidth" prop="buildingOverarea">
                  <el-input v-model="addForm.buildingOverarea" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地下楼层：" :label-width="formLabelWidth" prop="buildingBelow">
                  <el-input v-model="addForm.buildingBelow" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地下楼层面积：" :label-width="formLabelWidth" prop="buildingBelowarea">
                  <el-input v-model="addForm.buildingBelowarea" autocomplete="off"></el-input>
                </el-form-item>
              </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="add">保 存</el-button>
              <el-button @click="addDialog = false">取 消</el-button>
            </div>
          </el-dialog>
          <!-- 修改 -->
          <el-dialog title="楼宇详情" :visible.sync="updateDialog" width="70%">
            <el-form :model="updateForm" ref="updateForm">
              <div>
                <el-form-item label="楼宇id" :label-width="formLabelWidth" prop="buildingId" hidden>
                  <el-input v-model="updateForm.buildingId" clearable></el-input>
                </el-form-item>
                <el-form-item label="楼宇名称：" :label-width="formLabelWidth" prop="buildingName">
                  <el-input v-model="updateForm.buildingName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="物业费：" :label-width="formLabelWidth" prop="buildingProperty">
                  <el-input v-model="updateForm.buildingProperty" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="楼宇编号：" :label-width="formLabelWidth" prop="buildingNum">
                  <el-input v-model="updateForm.buildingNum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="建筑面积；" :label-width="formLabelWidth" prop="buildingArea">
                  <el-input v-model="updateForm.buildingArea" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="在管面积：" :label-width="formLabelWidth" prop="buildingNowarea">
                  <el-input v-model="updateForm.buildingNowarea" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="楼宇描述：" :label-width="formLabelWidth" prop="buildingDescribe">
                  <el-input v-model="updateForm.buildingDescribe" type="textarea" :rows="2" autocomplete="off">
                  </el-input>
                </el-form-item>
                <el-form-item label="楼宇照片：" :label-width="formLabelWidth" prop="buildingImg">
                  <el-input v-model="updateForm.buildingImg" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="楼宇地址：" :label-width="formLabelWidth" prop="buildingAddress">
                  <el-input v-model="updateForm.buildingAddress" autocomplete="off"></el-input>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="楼层层高：" :label-width="formLabelWidth" prop="buildingFloorHeight">
                  <el-input v-model="updateForm.buildingFloorHeight" autocomplete="off"></el-input>米
                </el-form-item>
                <el-form-item label="地上楼层：" :label-width="formLabelWidth" prop="buildingOver">
                  <el-input v-model="updateForm.buildingOver" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地上楼层面积：" :label-width="formLabelWidth" prop="buildingOverarea">
                  <el-input v-model="updateForm.buildingOverarea" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地下楼层：" :label-width="formLabelWidth" prop="buildingBelow">
                  <el-input v-model="updateForm.buildingBelow" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地下楼层面积：" :label-width="formLabelWidth" prop="buildingBelowarea">
                  <el-input v-model="updateForm.buildingBelowarea" autocomplete="off"></el-input>
                </el-form-item>
              </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="update">保 存</el-button>
              <el-button @click="updateDialog = false">取 消</el-button>
            </div>
          </el-dialog>
        </div>
      </el-main>
      <!-- 房间信息 -->
      <el-dialog :visible.sync="selectRoomDialog" width="70%" :center="true" :show-close="false">
        <div slot="title">
          <el-header class="head">
            <div class="divHead"></div>
            <el-row>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <div class="topFont">房间信息详情</div>
                </div>
              </el-col>
              <div class="divBtn">
                <i class="el-icon-close bigClose" @click="selectRoomDialog = false"></i>
              </div>
            </el-row>
          </el-header>
        </div>
        <!-- 楼层信息 -->
        <el-col :gutter="4" v-for="(item, index) in selectRoomForm" :key="index">
          <div class="card-floor">
            <p>{{ item.buildfloorName }}</p>
            <div>
              <div v-if="item.buildfloorStatus == 1">地上</div>
              <div v-if="item.buildfloorStatus == 2">地下</div>
            </div>
            <p>{{ item.buildfloorArea }}m²</p>
            <div class="btn">
              <el-button size="mini" @click="addRoomForm.buildfloorId = item.buildfloorId, addRoomDialog = true">添加房间
              </el-button>
            </div>
          </div>
          <!-- 房间信息 -->
          <el-col :span="5" v-for="(link, index) in item.roomVoList" :key="index">
            <div v-if="link.roomId != null && item.buildfloorId == link.buildfloorId" class="card-room" shadow="never">
              <div class="card-size">
                户型图
                <el-image style="padding-left: 5px" :src="url" :preview-src-list=[link.roomImg]>
                </el-image>
                <p class="roomName">{{ link.roomName }}</p>
                <div>装修情况：
                  <span v-if="link.roomTrim == 1">毛坯</span>
                  <span v-if="link.roomTrim == 2">精装</span>
                </div>
                <p>房间面积：{{ link.roomArea }}m²</p>
                <p>出租单价：{{ link.roomPrice }}元/平方/日</p>
              </div>
            </div>
          </el-col>
        </el-col>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="selectRoomDialog = false">保 存</el-button>
          <el-button @click="selectRoomDialog = false">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 添加房间 -->
      <el-dialog title="房间信息新增" :visible.sync="addRoomDialog" width="70%">
        <el-form :model="addRoomForm" ref="addRoomForm">
          <div>
            <el-form-item label="房间名称：" :label-width="formLabelWidth" prop="roomName">
              <el-input v-model="addRoomForm.roomName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="房间面积：" :label-width="formLabelWidth" prop="roomArea">
              <el-input v-model="addRoomForm.roomArea" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="装修情况：" :label-width="formLabelWidth" prop="roomTrim">
              <el-select v-model="addRoomForm.roomTrim" clearable placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出租单价：" :label-width="formLabelWidth" prop="roomPrice">
              <el-input v-model="addRoomForm.roomPrice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="户型图：" :label-width="formLabelWidth" prop="roomImg">
              <el-input v-model="addRoomForm.roomImg" autocomplete="off"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addRoom">保 存</el-button>
          <el-button @click="addRoomDialog = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-container>

  </div>
</template>

<script>
export default {
  data() {
    return {
      addDialog: false,
      addForm: {},
      addRoomDialog: false,
      addRoomForm: {},
      updateDialog: false,
      updateForm: {},
      selectRoomDialog: false,
      selectRoomForm: {},
      formLabelWidth: "120px",
      buildingList: [],
      page: {
        total: 0
      },
      queryBuilding: {
        currentPage: 1,
        pageSize: 5,
        buildingName: ""
      },
      url: 'https://cdn3.axureshop.com/demo/1968221/images/%E6%88%BF%E9%97%B4%E4%BF%A1%E6%81%AF/u3903.svg',
      options: [{
        value: 1,
        label: '毛坯'
      }, {
        value: 2,
        label: '精装'
      }],
      value: '',
      listId: [],
    };
  },
  methods: {
    loadBuilding() {
      this.$axios.post("buildings/queryAll", this.queryBuilding).then(res => {
        this.buildingList = res.data.data.list.list;
        this.page.total = res.data.data.list.total;
      })
    },
    //批量删除方法
    batchDelect() {
      const buildingIds = new Set();
      for (let i = 0; i < this.listId.length; i++) {
        buildingIds.add(this.listId[i].buildingId);
      }
      this.$axios.post("buildings/deleteBatch", buildingIds).then((res) => {
        if (res.data.code == 200) {
          alert("确定删除？");
        }
        this.loadBuilding();
      });
    },
    selectAllRoom(id) {
      this.$axios.post("buildfloor/" + id).then(res => {
        this.selectRoomForm = res.data.data.list;
        this.selectRoomDialog = true;
      })
    },
    add() {
      this.$axios.post("buildings/", this.addForm).then(res => {
        if (res.data.code == 200) {
          this.$message.success("添加成功");
          this.addDialog = false;
          this.$refs.addForm.resetFields();
          this.loadBuilding();
        }
      })
    },
    addRoom() {
      this.$axios.post("rooms/", this.addRoomForm).then(res => {
        if (res.data.code == 200) {
          this.$message.success("添加成功");
          this.addRoomDialog = false;
          this.$refs.addRoomForm.resetFields();
        }
      })
    },
    handleEdit(id) {
      this.$axios.post("buildings/" + id).then(res => {
        this.updateDialog = true;
        this.updateForm = res.data.data.building;
      });
    },
    update() {
      this.$axios.put("buildings/", this.updateForm).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.updateDialog = false;
          this.$refs.updateForm.resetFields();
          this.loadBuilding();
        }
      });
    },
    handleDelete(id) {
      this.$axios.delete("buildings/" + id).then(res => {
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.loadBuilding();
        }
      });
    },
    handleSizeChange(val) {
      this.queryBuilding.pageSize = val;
      this.loadBuilding();
    },
    handleCurrentChange(val) {
      this.queryBuilding.currentPage = val;
      this.loadBuilding();
    }
  },
  mounted() {
    this.loadBuilding();
  }
};
</script>
<style scoped>
.all {
  width: 100%;
  height: 700px;
  background-color: rgb(240, 242, 245);
}

.allContainer {
  width: 98%;
  margin: auto;
}

.head {
  background-color: white;
  width: 100%;
  height: 10px;
  line-height: 60px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}

.divHead {
  background-color: cornflowerblue;
  width: 7px;
  height: 50%;
  float: left;
  margin-top: 15px;
  border-radius: 2px;
  margin-left: 8px;
}

.topFont {
  float: left;
  margin-left: 18px;
  font-size: 18px;
  font-weight: 900;
}

.divBtn {
  float: right;
  margin-right: 10px;
}

.bottomMain {
  border-radius: 8px;
  width: 100%;
  height: 540px;
  margin: auto;
  margin-top: 5px;
}

.divMain {
  width: 100%;
  height: 100%;
}

.mainTop {
  width: 100%;
  height: 13%;
  margin: auto;
  border: 1px solid darkgray;
  border-radius: 5px;
}

.divInputAll {
  background-color: white;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}

.divInput {
  height: 100%;
  line-height: 60px;
  float: left;
  margin-left: 20px;
}

.likeBtn {
  float: right;
  margin-right: 12px;
  line-height: 60px;
}

.inputFont {
  float: left;
  font-size: 5px;
}

.optionFont {
  float: right;
  color: #8492a6;
  font-size: xx-small;
}

.divSelAll {
  width: 100%;
  height: 75%;
  margin-top: 8px;
  line-height: 20px;
}

.divPage {
  width: 100%;
  height: 2%;
  margin-top: 20px;
  line-height: 10px;
}

.card-floor {
  width: 140px;
  color: white;
  text-align: center;
  line-height: 30px;
  background: #8591AF;
}

.card-room {
  width: 180px;
  line-height: 30px;
  margin-left: 180px;
  background: #FFF8F1;
}

.roomName {
  text-align: center;
  font-size: 30px;
  margin: 0;
  font-weight: bolder;
  line-height: 50px;
}
</style>
